<template>
  <div class="app">
    <div class="header">
      <nav class="container">
        <a href="/weather"
          ><i class="iconfont icon-sun">&nbsp; </i>
          <div>新中地天气</div></a
        >
        <div>{{ currentCity }}</div>
        <div>实时天气：{{ currentWeather }} {{ currentTemperature }}℃</div>
        <div>{{ currentWinddirection }}风{{ currentWindpower }}级</div>
        <div class="xinxi">
          <el-icon class="icon-hover" @click="handleInfo">
            <InfoFilled />
          </el-icon>

          <el-dialog
            v-model="showDialog"
            title="关于本应用"
            width="400px"
            center
          >
            <p><b>关于：</b><div>这个应用可以用来追踪你选择城市的当前天气。</div></p>
            <p><b>如何使用：</b></p>
            <div style="line-height: 1.8">
              <div>1. 点击搜索框输入你希望追踪的城市。</div>
              <div>2. 在搜索结果中选中一个城市，你将获取当地最新的天气。</div>
              <div>3. 点击右侧的 “＋” 号可以将城市添加到首页。</div>
            </div>
            <p>
              <b>移除城市：</b><div>如果不想关注某个城市，可以在首页点击删除按钮。</div>
            </p>
            <template #footer>
              <el-button type="primary" @click="showDialog = false"
                >知道了</el-button
              >
            </template>
          </el-dialog>
          <i
            v-if="!cityStore.savedCities.includes(city)"
            class="iconfont icon-jiahao icon-hover"
            @click="handleAdd"
          ></i>
        </div>
      </nav>
    </div>
    <div class="interview">
      你正在预览{{ city }}的天气信息
      <span v-if="!cityStore.savedCities.includes(city)">，可以通过右上角的"+"号按钮保存起来</span>
    </div>
    <div class="body">
      <div class="information">
        <span class="item">当日气温是：{{ cityTemperature }}摄氏度 </span>
        <span class="item">当日天气是：{{ cityWeather }}</span>
        <span class="item">当日风向是：{{ cityWinddirection }}风</span>
        <span class="item">当日风力是：{{ cityWindpower }}级</span>
      </div>
      <el-divider />
      <div class="weather">
        <div class="renWea">
          <div class="weaData">
            <div class="content">
              <span>今天</span>
              <span>{{ futureData[0]?.date.slice(5) }}</span>
              <span>{{ futureData[0]?.dayweather }}</span>
              <span>风力 {{ futureData[0]?.daypower }}级</span>
            </div>
            <div class="content">
              <span>明天</span>
              <span>{{ futureData[1]?.date.slice(5) }}</span>
              <span>{{ futureData[1]?.dayweather }}</span>
              <span>风力 {{ futureData[1]?.daypower }}级</span>
            </div>
            <div class="content">
              <span>周{{ numberToWeek[futureData[2]?.week] }}</span>
              <span>{{ futureData[2]?.date.slice(5) }}</span>
              <span>{{ futureData[2]?.dayweather }}</span>
              <span>风力 {{ futureData[2]?.daypower }}级</span>
            </div>
            <div class="content">
              <span>周{{ numberToWeek[futureData[3]?.week] }}</span>
              <span>{{ futureData[3]?.date.slice(5) }}</span>
              <span>{{ futureData[3]?.dayweather }}</span>
              <span>风力 {{ futureData[3]?.daypower }}级</span>
            </div>
          </div>
          <div class="chart"><SearchChart /></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import SearchChart from '../components/SearchChart.vue'
import { InfoFilled } from '@element-plus/icons-vue'
import { useWeatherStore } from '@/stores/weather'
import { useSearchStore } from '@/stores/search'
import { useRoute } from 'vue-router'
import { useCityStore } from '@/stores/city'
import { ElDialog } from 'element-plus'

const cityStore = useCityStore()

const showDialog = ref(false)
function handleInfo() {
  showDialog.value = true
}

//通过路由获取城市名称
const route = useRoute()
const city = ref(route.params.city || '')
console.log(city.value)

//搜索城市天气
const cityWeather = ref('')
const cityTemperature = ref('')
const cityWinddirection = ref('')
const cityWindpower = ref('')

//
const resultCity = useWeatherStore()
const resultAdcode = useWeatherStore()
const resultWeatherData = useWeatherStore()
const currentCity = ref('')

const searchData = useSearchStore()

const currentAdcode = ref('')

const currentWeather = ref('')
const currentTemperature = ref('')
const currentWinddirection = ref('')
const currentWindpower = ref('')

const futureData = ref([])
onMounted(async () => {
  if (city.value) {
    // 先获取adcode
    await searchData.fetchAdcodeData(city.value)
    // 用adcode获取天气
    await searchData.fetchWeatherData(searchData.adcodeData)
    await searchData.fetchFutureWeatherData(searchData.adcodeData)

    //将数据赋给城市天气
    cityWeather.value = searchData.weatherData.weather
    cityTemperature.value = searchData.weatherData.temperature
    cityWinddirection.value = searchData.weatherData.winddirection
    cityWindpower.value = searchData.weatherData.windpower
    futureData.value = searchData.futureWeatherData
  }

  // 触发加载数据
  //通过ip查询城市
  await resultCity.fetchCityData()
  currentCity.value = resultCity.cityData.city
  //通过城市查询adcode
  await resultAdcode.fetchAdcodeData(currentCity.value)
  currentAdcode.value = resultAdcode.adcodeData
  //通过adcode查询城市天气
  await resultWeatherData.fetchWeatherData(currentAdcode.value)

  currentWeather.value = resultWeatherData.weatherData.weather
  currentTemperature.value = resultWeatherData.weatherData.temperature
  currentWinddirection.value = resultWeatherData.weatherData.winddirection
  currentWindpower.value = resultWeatherData.weatherData.windpower
})
//自定义转换
const numberToWeek = {
  1: '一',
  2: '二',
  3: '三',
  4: '四',
  5: '五',
  6: '六',
  7: '日',
}

function handleAdd() {
  cityStore.addCity(city.value) // 添加到列表
  console.log('添加成功')
}
</script>

<style scoped>
@import 'https://at.alicdn.com/t/c/font_4968282_j9nodh8b0fl.css';
.app {
  min-height: 100vh; /* 将元素高度设置为视口高度的 100% */

  background: #00668a;
  margin: 0px;
  border-radius: 10px;
}
a {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 1.5rem;
  color: white;
  text-decoration: none; /* 移除下划线 */
}
i {
  font-size: 1.5rem; /* 直接设置i标签的字体大小 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.xinxi {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  cursor: pointer;
}
.icon-hover {
  transition: all 1.5s ease;
  border-radius: 50%;
}
.icon-hover:hover {
  color: rgba(0, 78, 113, 0.3);
}

.header {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); /* header与body之间的阴影 */
}
.container {
  color: white;
  display: flex;

  gap: 1rem;
  margin: 0 7rem;
  padding: 1.5rem 10rem;
  align-items: center;
}
.body {
  color: white;
  margin: 0 7rem;
  padding: 0 10rem;
  align-items: center;
}
.interview {
  color: #ffffff;
  padding: 0.5rem;
  text-align: center;
  background: #004e71;
}
.information {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
  text-align: center;
}
.item {
  flex: 1;
}
.renWea {
  margin-top: 0.5rem;
  border-radius: 5px;
  padding: 0 48px;
  padding-top: 40px;
  background: #004e71;
}
.weaData {
  display: flex;
  gap: 1.5rem;
}

.content {
  flex: 1;
  display: flex;

  flex-direction: column;
  gap: 1rem;
  text-align: center;
}
.chart {
  margin-top: 40px;
  height: 230px;
}
</style>
